<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery</title>
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">

		$(function () {

			// $('.box p').click(function(event) {
			// 	$(this).animate({width: "600px"}, 2000);
			// });

			// $(":input").css('width', '300px');
			// 
			$('.box').hover(function() {
				$(this).animate({width: "600px"}, 1000);
			}, function() {
				$(this).animate({width: "200px"}, 1000);
			});

			$('.box').addClass('on');

			$('#input').change(function(event) {
				alert($(this).val());
			});

			
		})

		

	</script>
	<style type="text/css">
		.box{
			width: 200px;
			height:200px;
			background: red url() 0 0 no-repeat;
		}
	</style>

</head>
<body>
	<div class="box" id="box">
		<p>学并思</p>
	</div>
	<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" id="input" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>